<template>
  <div>
    <left-left/>
    <project-left style="left:-13px;top:0;position: absolute"/>
    <div style="font-size: 28px;left:27%;top:50px;position: absolute;font-weight:bold">最近在看</div>
    <div style="font-size: 18px;left:27%;top:95px;position: absolute">共{{number}}个项目</div>
    <div><img :src="teamUrl" alt="" style="right:10%;top:30px;position: absolute"></div>
    <div>
      <el-input v-model="searchInput" placeholder="请输入内容" style="right:10%;top:120px;position: absolute;width:300px"></el-input>
    </div>
    <div style="right:10%;top:170px;position: absolute;width:1050px"><el-divider></el-divider></div>
    <div style="left:25%;top:215px;position: absolute;">
      <el-row>
        <el-col v-for="(item) in recent" style="width: 240px;margin: 20px" >
          <el-card :body-style="{ padding: 'px', width:'200px'}" shadow="hover">
            <img :src="item.src" class="image" >
            <div style="padding: 10px;">
              <el-button v-if="item.collected===false" icon="el-icon-star-off"
                         size="small" circle style="position: absolute;margin-left: 160px"></el-button>
              <el-button v-if="item.collected===true" icon="el-icon-star-on"
                         size="small" circle style="position: absolute;margin-left: 160px"></el-button>
              <span>
                <el-link href="www.baidu.com" style="font-size: 16px">{{ item.name }}</el-link>
                <div class="bottom clearfix">
                <div style="font-size: 10px">{{item.user}}-{{item.time}}</div>
              </div>
              </span>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import ProjectLeft from "@/components/left/projectLeft";
import TeamManageLeft from "@/components/left/teamManageLeft";
import LeftLeft from "@/components/left/leftLeft";
export default {
  name: "main_Recent",
  // eslint-disable-next-line vue/no-unused-components
  components: {LeftLeft, TeamManageLeft, ProjectLeft},
  data(){
    return{
      teamUrl:require('@/assets/teamTeam.png'),
      searchInput:'',
      number:5,
      recent:[
        {
          src:"https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png",
          name:"项目1",
          collected:false,
          user:"wzn",
          time:"2022/08/02",
        },
        {
          src:"https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png",
          name:"项目2",
          collected:true,
          user:"wzn",
          time:"2022/08/02",
        },
        {
          src:"https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png",
          name:"项目2",
          collected:false,
          user:"wzn",
          time:"2022/08/02",
        },
        {
          src:"https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png",
          name:"项目2",
          collected:false,
          user:"wzn",
          time:"2022/08/02",
        },
      ]
    }
  }
}
</script>

<style scoped>
.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
</style>
